<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		  <meta name="renderer" content="webkit">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
          <link rel="stylesheet" href="layui.css"  media="all">	
		<style>
			.header{
				width: 100%;
				height: 50px;
				background-color: #00ADBC;
			}
			.header img{
				cursor: pointer;
				margin: 5px 20px;
			}
			.header-left{
				margin-right: 85%;
				line-height: 50px;
		        float: right;

			}
			.header-left1{
				cursor: pointer;
				color: white;
				margin: 0px 10px;
			}
			.clear{
				clear: both;
			}
			.header-right{
				float: right;
				margin-top: -45px;
				margin-right: 7%;
				
			}
			.img-right{
				margin-left: 80%;
				margin-top: -300px;
				position: absolute;
			}
			.tet{
				color: white;
				font-size: 16px;
				cursor: pointer;
			}


			.img-right2{
				margin-top: 20px;
	            height: 110px;
	            border: 0px solid red;
			}
			.text-1{
				color: #5B6770;
				font-size: 20px;
				margin-left: 34%;
			}

			.center-img ul li{
				width: 24.1%;
				height: 210px;
				margin: 0px 5px;
				border: 0px solid red;
				border-radius: 15px;
				cursor: pointer;
				float: left;
			}
			.center-img img{
				border-radius: 15px;
			}
			.img-text{
				position: absolute;
				height: 50px;
				width: 24.1%;
				background-color: #706094;
				border-radius: 15px;
				margin-top: -50px;
				filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.8;
			}
			.img-text1{
				position: absolute;
				height: 50px;
				width: 24.1%;
				background-color: #058EC0;
				border-radius: 15px;
				margin-top: -50px;
				filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.8;
			}	
			.img-text2{
				position: absolute;
				height: 50px;
				width: 24.1%;
				background-color: #02A4B6;
				border-radius: 15px;
				margin-top: -50px;
				filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.8;
			}	
			.img-text3{
				position: absolute;
				height: 50px;
				width: 24.1%;
				background-color: #BDC324;
				border-radius: 15px;
				margin-top: -50px;
				filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.8;
			}		
			.text-01{
				color: white;
				font-size: 20px;
				margin-left: 43%;
			}	
			.text-02{
				color: white;
				font-size: 17px;
				margin-left: 25%;
			}		
			.text-03{
				color: white;
				font-size: 20px;
				margin-left: 35%;
			}	
			.text-04{
				color: white;
				font-size: 17px;
				margin-left: 38%;
			}	
			.text-05{
				color: white;
				font-size: 20px;
				margin-left: 35%;
			}	
			.text-06{
				color: white;
				font-size: 17px;
				margin-left: 20%;
			}	
			.text-07{
				color: white;
				font-size: 20px;
				margin-left: 35%;
			}	
			.text-08{
				color: white;
				font-size: 17px;
				margin-left: 8%;
			}	
			.clear{
				clear: both;
			}
			.center-block{
				height: 30px;
				width: 100%;
				border: 0px solid red;
			}		
			.center-block1{
				height: 40px;
				width: 100%;
				margin: 10px 0px;
				cursor: pointer;
				background-color: #FFA400;
			}
			.center-block1 span{
				font-size: 20px;
				color: white;
				line-height: 40px;
				margin-left: 43%;
			}		
			.org2{
				float: right;
			}	
			.center-img2{
				margin-bottom: 20px;
			}	
			.clear{
				clear: both;
			}		
			.footer{
				width: 100%;
				height: 135px;
				background-color: #C8C1D9;
			}		
			.footer-text{
				color: white;
				font-size: 20px;
				margin-left: 41.5%;
				line-height: 50px;
			}	
			.footer-text-1{
				font-size: 15px;
				cursor: pointer;
				margin-left: 30%;
			}
			.footer-text-2{
				font-size: 15px;
				cursor: pointer;
				margin-left: 8%;
			}	
			.footer-text1{
				color: white;
				font-size: 17px;
				margin-left: 10%;
			}	
			.footer-text1-1{
				margin-left: 5%;
			}
			.footer1{
				height: 90px;
				width: 100%;
				background-color: #7665A0;
			}	
			.active{
				margin-left: 3%;
				margin-top: 30px;
				width: 10%;
			}
			.footer2{
				color: white;
				margin-left: 3%;
				margin-top: 5px;
			}
			.img-right3{
				height: 160px;
				display: none;
			}
			#input-1{
				height: 30px;
				width: 9%;
				margin-left: 20%;
				border-radius: 5px;
			}
			#input-2{
				height: 30px;
				width: 9%;
				margin-left: 2%;
				border-radius: 5px;
			}	
			#input-3{
				height: 30px;
				width: 9%;
				margin-left: 2%;
				border-radius: 5px;
			}
			.active1{
				height: 30px;
				width: 5%;
				margin-left: %;
				border-radius: 5px;
			}		
			.add-cart-button{
				margin-left: 2%;
			}	
			.add-cart-button1{
				margin-left: 2%;
			}
			.active2{
				height: 30px;
				width: 6%;
				margin-left: %;
				border-radius: 5px;
			}
			.oo{
				font-size: 15px;
				margin-left: 39%;

			}		
			.label{
				margin-top: 20px;
			}	
			.img-right3{
				margin-top: 20px;
			}		





		</style>
	</head>
	<body>
		<div class="header">
			<img src="images/code.png" width="40px" height="40px">
			<div class="header-left"><a href="code.org1.html"><span class="header-left1">课程</span></a><span class="header-left1">项目集</span></div>
			<div class="clear"></div>
			<div class="header-right"><a href="code.org2.html"><button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="background-color: #00ADBC; border: 2px solid white;">登录</button></a></div>
		</div>	
	    <!--
        	作者：a1403678744@qq.com
        	时间：2017-08-06
        	描述：图片轮播
        -->
       
        <div class="flicker-example" data-block-text="false">
	       <ul>
		     <li data-background="响图片/img/field.jpg">
			   <div class="flick-title">编程一小时：已有 431,363,247 次参与</div>
			   <div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all.</div>
		     </li>
		     <li data-background="响图片/img/forest.jpg">
			   <div class="flick-title">八百五十万女孩已经在Code.org里注册学习了。</div>
			   <div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all.</div>
		     </li>
		     <li data-background="响图片/img/frozen-water.jpg">
			   <div class="flick-title">通过编程序你可以做到任何想做的事情。”玛雅，二年级</div>
			   <div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all.</div>
		     </li>
	       </ul>
        </div>
        <div class="img-right"><button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="background-color: #FFA400; ">开始学习</button><br/><br/><span class="trt"><img src="https://code.org/shared/images/fit-25/play-button.png"><span class="tet">观看视频</span></span></div>
 
        <div class="img-right2">
        	<span class="text-1">在每个学校每个学生都应该有机会学习计算机科学</span><br/>
        	<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="background-color: #FFA400; margin-left: 47%; margin-top: 30px;">支持他  ∨</button>
        </div>
         <div class="img-right3">
        	<span class="text-1">在每个学校每个学生都应该有机会学习计算机科学<br/><span class="oo">如果你同意，与1,782,351人一样签上你的名字。</span></span><br/>
        	<div class="label">
        	<input type="text" name="" id="input-1" placeholder="姓名"><input type="text" name="" id="input-2" placeholder="电子邮件"><input type="text" name="" id="input-3" placeholder="邮政编码或国家"><span class="add-cart-button">年龄 </span>       	<select class="active1">
        		<option>-</option>
        		<option>12</option>
        		<option>13</option>
        		<option>14</option>
        		<option>15</option>
        		<option>16</option>
        		<option>17</option>
        		<option>18</option>
        		<option>19</option>
        		<option>20</option>
        	</select>
        	<span class="add-cart-button1">我是</span>
        	<select class="active2">
        	    <option>-请选择-</option>
        		<option>学生</option>
        		<option>家长</option>
        		<option>教师</option>
        		<option>软件工程师</option>
        		<option>其他</option>
        	</select>
        	<button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="background-color: #FFA400; margin-left: 2%;">我同意</button>
        	</div>
        </div>
        
        <div class="center-img">
        	<ul>
        		<li>
        			<img src="images/code1.png" width="100%" height="210px">
        			<div class="img-text">
        				
        				<span class="text-01">学生</span><br/>
        				<span class="text-02">体验我们所有的课程</span>
        			</div>
        		</li>
        		<li>
        			<img src="images/code2.png" width="100%" height="210px">
        			<div class="img-text1">
        				
        				<span class="text-03">教育工作者</span><br/>
        				<span class="text-04">教你的学生</span>
        			</div>
        		</li>
        		<li>
        			<img src="images/code3.png" width="100%" height="210px">
        			<div class="img-text2">
                        
        				<span class="text-05">编程一小时</span><br/>
        				<span class="text-06">任何人都可学习。立即开始</span>        				
        			</div>
        		</li>
        		<li>
        			<img src="images/code4.png" width="100%" height="210px">
        			<div class="img-text3">
                        
        				<span class="text-07">飞扬的代码</span><br/>
        				<span class="text-08">创建自己的 Flappy 游戏并与别人分享</span>          				
        			</div>
        		</li>
        	</ul>
        </div>
        <div class="clear"></div>
        <div class="center-block"></div>
        <div class="center-block1">
        	<span>探索Code.org的课程</span>
        </div>
        
        <div class="center-img2">
        	<img src="images/org1.png" width="50%">
        	<img class="org2" src="images/org2.png" width="50%">
        </div>
        <div class="clear"></div>
        
        <div class="footer">
        	<div class="footer-text">Code.org  感谢各位支持者<span class="footer-text-1">查看全部</span><span class="footer-text-2">捐赠</span></div>
        	<div class="footer-text1">
        		Reid Hoffman, John and Ann Doerr, Amazon Web Services, Bill Gates, Google, Sean Parker, Diane Tang and Ben Smith, Mark Zuckerberg and Priscilla<br/> Chan, Quadrivium Foundation, Bill and Melinda Gates Foundation, Ballmer Family Giving, Jeff Bezos, BlackRock, Facebook, Microsoft, Drew Houston,<br/> <span class="footer-text1-1">Ali and Hadi Partovi, The Marie-Josée and Henry R. Kravis Foundation, Verizon, Salesforce, Infosys Foundation USA, Omidyar Network</span>
        	</div>
        </div>
        
        <div class="footer1">
        	<select class="active">
        		<option>Gaeilge</option>
        		<option>Suomi</option>
        		<option>Magyar</option>
        		<option>Englisgh</option>
        		<option>Eesti</option>
        		<option>Dansk</option>
        		<option>Euskara</option>
        		<option>Galego</option>
        		<option>简体字</option>
        		<option>繁体字</option>
        	</select>
        	<div class="footer2">© Code.org, 2017</div>
        </div>

        
		
		
		
		
		
		
		
		<script src="text/lay/dest/layui.all.js"></script>
		<script src="响图片/js/jquery-v1.10.2.min.js" type="text/javascript"></script>
        <script src="响图片/js/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
        <script src="响图片/js/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>
        <link href="响图片/css/flickerplate.css"  type="text/css" rel="stylesheet">
        <script src="响图片/js/flickerplate.min.js" type="text/javascript"></script>
        <script>
        	
        	var text=document.getElementsByClassName("text-01")[0];
        	var text1=document.getElementsByClassName("text-03")[0];
        	var text22=document.getElementsByClassName("text-05")[0];
        	var text3=document.getElementsByClassName("text-07")[0];
        	var footer=document.getElementsByClassName("footer-text-1")[0];
        	var footer1=document.getElementsByClassName("footer-text-2")[0];
        	var right2=document.getElementsByClassName("img-right2")[0];
        	var right3=document.getElementsByClassName("img-right3")[0];
        	
        	
        	right2.onclick=function(){
        		right2.style.display="none";
        		right3.style.display="block";
        	}
        	
        	
        	
        	
        	
        	text.onmouseover=function(){
        		text.style.borderBottom="2px solid white"
        	}
        	text.onmouseout=function(){
        		text.style.borderBottom="0px solid white"
        	}
        	text1.onmouseover=function(){
        		text1.style.borderBottom="2px solid white"
        	}
        	text1.onmouseout=function(){
        		text1.style.borderBottom="0px solid white"
        	}     
        	text22.onmouseover=function(){
        		text22.style.borderBottom="2px solid white"
        	}
        	text22.onmouseout=function(){
        		text22.style.borderBottom="0px solid white"
        	} 
        	text3.onmouseover=function(){
        		text3.style.borderBottom="2px solid white"
        	}
        	text3.onmouseout=function(){
        		text3.style.borderBottom="0px solid white"
        	}        
         	footer.onmouseover=function(){
        		footer.style.borderBottom="2px solid white"
        	}
        	footer.onmouseout=function(){
        		footer.style.borderBottom="0px solid white"
        	} 
         	footer1.onmouseover=function(){
        		footer1.style.borderBottom="2px solid white"
        	}
        	footer1.onmouseout=function(){
        		footer1.style.borderBottom="0px solid white"
        	}         	
        	
        	-
			  $(document).ready(function(){
               $(".header-left1").mouseover(function(){
                $(this).css("border-bottom","3px solid #FFA400");
               });
               $(".header-left1").mouseout(function(){
                $(this).css("border-bottom","0px solid #FFA400");
               });
              });
        	
        	
	        $(document).ready(function(){
	          $('.flicker-example').flicker();
            });
            
            
			checkCookie();
			function getCookie(c_name)
				{
				if (document.cookie.length>0)
				  {
				  c_start=document.cookie.indexOf(c_name + "=")
				  if (c_start!=-1)
				    { 
				    c_start=c_start + c_name.length+1 
				    c_end=document.cookie.indexOf(";",c_start)
				    if (c_end==-1) c_end=document.cookie.length
				    return unescape(document.cookie.substring(c_start,c_end))
				    } 
				  }
				return ""
				}

				function setCookie(c_name,value,expiredays)
				{
				var exdate=new Date()
				exdate.setDate(exdate.getDate()+expiredays)
				document.cookie=c_name+ "=" +escape(value)+
				((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
				}

				function checkCookie()
				{
				username=getCookie('username')
				if (username!=null && username!="")
				  {}
				else 
				  {
				  username=1;
				  if (username!=null && username!="")
				    {
				    setCookie('username',username,1);
				    alert("今日特惠：雪碧-可乐-美年达-矿泉水");
				    }
				  }
				}

        </script>


	</body>
</html>
